<template>

  <el-container style="min-height: 100vh;">

    <el-aside
        :width="sideWidth+'px'"
        style="background-color: rgb(238, 241, 246);
        /*noinspection CssInvalidFunction*/box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" :menus="user.menus"/>
    </el-aside>

    <el-container>
      <el-header style="  border-bottom: 3px solid #ccc;">
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"/>
      </el-header>
      
      <el-main class="viewMain">
<!--        //当前页面的子路由会在 router-view 中展示-->
        <router-view @refreshUser="getUser" />   <!--refreshUser传给父组件调用目的为更改全局user  后续可以升级为全局事件总线或者vuex-->
      </el-main>

    </el-container>
  </el-container>

</template>

<script>
import Aside from "@/components/Aside";
import Header from "@/components/Header";


export default {
  name: 'HomeView',
  components: {
    Header,
    Aside
  },
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200, //控制导航宽带
      logoTextShow: true, //收缩后显示文字
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{}
    }
  },
  methods:{
    collapse(){ //点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if(this.isCollapse){
        this.sideWidth = 64
        this.collapseBtnClass='el-icon-s-unfold'
        this.logoTextShow=false
      }else{
        this.sideWidth=200
        this.collapseBtnClass='el-icon-s-fold'
        this.logoTextShow=true
      }
    },
    getUser(){
        this.request.get("/user/"+this.user.id).then(res=>{
          console.log("Manage"+res.data)
          this.user = res.data
        })
    }

  }
}
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    
  }
  
  .el-aside {
    color: #333;
  }
  .viewMain{
    position: relative;
  }
</style>
